<template>
  <div class="dashboard-container">
    <el-row :gutter="20" class="headerbox">
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <img
            src="http://124.223.14.236:8060/dist/static/img/admin-icon.5c6774a8.png"
            alt=""
          />
          <div>
            <h4>管理员用户</h4>
            <p>{{ allAdminData.admin_num }}名</p>
          </div>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple-light">
          <img
            src="http://124.223.14.236:8060/dist/static/img/user-icon.4530a2a5.png"
            alt=""
          />
          <div>
            <h4>平台注册用户</h4>
            <p>{{ sex.total }}名</p>
          </div>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-yellow">
          <img
            src="http://124.223.14.236:8060/dist/static/img/user-icon.4530a2a5.png"
            alt=""
          />
          <div>
            <h4>平台文章总数</h4>
            <p>{{ allAdminData.article_num }}名</p>
          </div>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-blue">
          <img
            src=""
            alt=""
          />
          <div>
            <h4>广告位{{ allAdminData.advpos_num }}个</h4>
            <p>广告图{{ allAdminData.advimg_num }}张</p>
          </div>
        </div></el-col
      >
    </el-row>

    <el-row :gutter="20" class="contentbox">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <div class="des_title">最新注册新用户</div>

          <el-table
            :data="newUser"
            style="width: 100%; border: 2px solid #d3dce6; height: 280px"
          >
            <el-table-column prop="username" width="180"> </el-table-column>
            <el-table-column prop="name" width="180">
              <template #default="{ row }">
                <div>{{ row.sex ? '男' : '女' }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="address"> </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="8"
        ><div class="grid-content bg-purple">
          <div class="des_title">点赞文章排行</div>
          <el-table
            :data="hotArticle"
            style="width: 100%; border: 2px solid #d3dce6; height: 280px"
          >
            <el-table-column prop="title" width="800"> </el-table-column>
            <!-- <el-table-column prop="author" width="180"> </el-table-column> -->
          </el-table>
        </div></el-col
      >
      <el-col :span="8"
        ><div class="grid-content bg-purple">
          <div class="des_title">用户性别分析</div>
          <div
            ref="echatsbox"
            style="
              width: 100%;
              height: 280px;
              background-color: #fff;
              border: 2px solid #d3dce6;
            "
          ></div></div
      ></el-col>
    </el-row>
    <el-row :gutter="20" class="footerbox">
      <el-col
        ><div class="grid-content bg-purple">
          <div
            ref="departmentbox"
            style="width: 100%; height: 400px"
          ></div></div
      ></el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import './styles/index.scss'
import { baseInfoAPI } from '@/api/dashboard'
export default {
  name: 'Dashboard',
  data () {
    return {
      allAdminData: {},
      hotArticle: [],
      newUser: [],
      sex: { user_man: 100, user_woman: 200 },
      allCateName: [],
      allCateNum: [],
      allCate: {}
    }
  },
  mounted () {
    this.ecahtsInit()
    this.departmentInit()
  },
  created () {
    this.getBaseInfo()
  },
  methods: {
    async getBaseInfo () {
      const { data } = await baseInfoAPI()
      this.hotArticle = data.hot_article
      this.newUser = data.new_user
      this.sex = data.user
      this.allCate = data.all_cate
      this.allCate.forEach(item => {
        this.allCateName.push(item.catename)
        this.allCateNum.push(item.num)
      })
      this.allAdminData = data
    },
    // 文章发布数量
    departmentInit (Name, Num) {
      var myChart = echarts.init(this.$refs.departmentbox)
      var option

      option = {
        title: {
          text: '各文章发布数量',
          left: 'center',
          top: 20,
          textStyle: {
            color: '#5470c6'
          }
        },
        xAxis: {
          type: 'category',
          data: Name
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: Num,
            showBackground: true,
            type: 'bar'
          }
        ]
      }

      option && myChart.setOption(option)
    },
    // 性别占比饼状图
    ecahtsInit () {
      var myChart = echarts.init(this.$refs.echatsbox)
      var option

      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '用户来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: this.sex.user_man, name: '男' },
              { value: this.sex.user_woman, name: '女' }
            ]
          }
        ]
      }
      option && myChart.setOption(option)
    }
  },
  watch: {
    sex: {
      handler () {
        this.ecahtsInit()
      },
      deep: true
    },
    allCate: {
      handler () {
        this.departmentInit(this.allCateName, this.allCateNum)
      },
      deep: true
    }
  }
}
</script>
